<template>
  <div v-if="!cookie">
    <div class="logo">
      <div class="box">
        <img src="~@/assets/img/logos/yesplaymusic.png" alt="">
        <span>x</span>
        <img src="~@/assets/img/logos/netease-music.png" alt="">
      </div>
    </div>
    <div class="login">
      <div class="login-wyy login-item" @click="$router.push('/login')">
        <div class="text">
          <div class="title">登录网易云账号</div>
          <div class="info">可访问全部数据</div>
        </div>
        <div class="right">
          <span class="el-icon-arrow-right" />
        </div>
      </div>
      <div class="search-wyy login-item" @click="$router.push('/searchUser')">
        <div class="text">
          <div class="title">搜索网易云账号</div>
          <div class="info">只能读取网易云公开数据</div>
        </div>
        <div class="right">
          <span class="el-icon-arrow-right" />
        </div>
      </div>
    </div>
  </div>
  <div v-else class="box">
    <!-- 头像名字区域 -->
    <div class="mySong">
      <div class="myName">
        <h1 class="name">
          <el-avatar :size="60" :src="src" class="avatar" />
          {{ list.nickname }}{{ $t('library.sLibrary') }}
        </h1>
      </div>
    </div>
    <!-- 头像名字区域 -->

    <!-- 喜欢的歌单 -->
    <div class="fond">
      <!-- 左边播放 -->
      <div class="liked-songs">
        <div class="top" @click="insurance(songList.id)">
          <p>
            <span>在无人的海岛上有美丽风景</span> <br>
            <span>想有梦里的竹蜻蜓带我去远行</span> <br>
            <span>去到你心里的那个神秘的巴黎</span>
            <!-- <span>我们好像</span> -->
            <!-- <span>比如爱包装心里话</span> -->
          </p>
        </div>
        <div class="button">
          <div class="titles">
            <div class="title">{{ $t('library.likedSongs') }}</div>
            <div class="sub-title">{{ songList.trackCount }}首歌</div>
          </div>
          <div class="play iconfont icon-24gf-playCircle" />
          <!-- <button  /> -->
        </div>
      </div>
      <!-- 左边播放 -->

      <!-- 右边歌单 -->
      <div class="songs">
        <Form />
        <!-- <Form /> -->
      </div>
      <!-- 右边歌单 -->
    </div>
    <!-- 喜欢的歌单 -->

    <!-- 全部歌单 -->
    <div class="complete">
      <h1>全部歌单</h1>
      <span class="new" @click="dialogVisible = true">
        <i class="tanJa iconfont icon-add" />
        <span>新建歌单</span>
      </span>
    </div>
    <!-- 全部歌单 -->

    <!-- 歌单列表 -->
    <div class="SongList">
      <SongList />
    </div>
    <!-- 歌单列表 -->

    <!-- 新建歌单弹出框 -->
    <el-dialog
      title="新建歌单"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="true"
    >
      <el-input v-model="input" placeholder="歌单标题" />
      <el-checkbox v-model="checked">设置为隐私歌单</el-checkbox>
      <!-- <hr> -->
      <div class="queDin">
        <el-button size="medium" type="primary" @click="btn">创 建</el-button>
      </div>
    </el-dialog>
    <!-- 新建歌单弹出框 -->
  </div>
</template>

<script>
import Form from './components/form.vue'
import SongList from './components/songlist.vue'
import { mapState } from 'vuex'
import { getUserInfo, getPlaylist, getNewList } from '@/api/MS/index.js'
export default {
  name: 'Library',
  components: {
    Form,
    SongList
  },
  data() {
    return {
      cookie: this.$store.state.cookie || this.$store.state.uid,
      src: 'https://p2.music.126.net/xSei1yJKuSJY3sMFUkiYZg==/109951166924151597.jpg?param=512y512',
      dialogVisible: false,
      input: '',
      list: {},
      privacy: null,
      songList: {},
      checked: false
    }
  },
  computed: {
    ...mapState(['userInfo', 'uid'])
  },
  created() {},
  mounted() {
    this.getUserInfo()
    // this.getPlaylist()
    // this.getNewList()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const id = this.uid || this.userInfo.id
      const { data } = await getUserInfo(id)
      this.list = data.profile
      this.src = this.list.avatarUrl
      this.getPlaylist()
    },
    // 新建歌单
    async btn() {
      if (this.checked === true) {
        console.log(11)
        this.privacy = '10'
      } else {
        console.log(22)
        this.privacy = ''
      }
      await getNewList({
        name: this.input,
        privacy: this.privacy,
        cookie: this.$store.state.cookie
      })
      this.dialogVisible = false
      this.input = ''
      this.getPlaylist()
    },
    // 获取用户歌单
    async getPlaylist() {
      const uid = this.uid || this.userInfo.id
      const { data } = await getPlaylist({
        uid: uid,
        limit: '31'
      })
      this.songList = data.playlist[0]
    },
    // 路由传参
    insurance(id) {
      console.log(id)
      this.$router.push({
        path: `/liked/${id}`
      })
    }
  }
}
</script>

<style lang="less" scoped>
.logo {
  display: flex;
  justify-content: center;
  margin: 40px 0;
  .box {
    width: 232px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      margin: 20px;
      width: 64px;
    }
  }
}
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  .login-wyy,
  .search-wyy {
    margin: 14px 0;
    width: 300px;
    height: 128px;
    background-color: rgb(232, 239, 253);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .text {
      // display: flex;
      // align-items: center;
      color: #335eea;
      transition: all 0.3s;
      .title {
        font-size: 24px;
        font-weight: bold;
      }
      .info {
        margin-top: 2px;
        font-size: 14px;
        color: rgba(51, 94, 234, 0.78);
      }
    }
    .right {
      opacity: 0;
      height: 24px;
      width: 24px;
      color: #335eea;
      margin-left: 16px;
      transition: all 0.3s;
      font-weight: bold;
      font-size: 24px;
    }
  }
}
.login-item:hover .right {
  opacity: 1;
  transition: all 0.3s;
  transform: translateX(10px);
}
.login-item:hover .text {
  transition: all 0.3s;
  transform: translateX(-10px);
}
.box {
  justify-content: space-between;
  // position: fixed;
  z-index: 2;
  width: 1084px;
  background-color: #fff;
  align-items: center;
  height: 64px;
  .el-button--medium {
    width: 100%;
    border-radius: 20px;
    background-color: #335eea;
  }
  /deep/.el-dialog {
    border-radius: 15px !important;
  }
  .el-dialog__wrapper {
    top: 150px;
  }
  /deep/.el-dialog__header {
    padding: 19px 25px 0px;
  }
  /deep/.el-dialog__headerbtn {
    top: 25px;
  }
  /deep/.el-dialog__body {
    padding: 20px 20px;
  }
  /deep/.el-dialog__title {
    font-weight: 600;
    font-size: 20px;
  }
  /deep/.el-input__inner {
    font-weight: 600;
    font-size: 16px;
    color: #767676;
  }
  /deep/.el-checkbox {
    margin: 10px 0;
  }
  .queDin {
    padding-top: 16px;
    border-top: 1px solid hsla(0, 0%, 50.2%, 0.18);
  }
  .mySong {
    .myName {
      .name {
        font-size: 42px;
        display: flex;
        align-items: center;
        .avatar {
          margin-right: 12px;
          color: #000;
        }
      }
    }
  }
  .fond {
    display: flex;
    margin-top: 24px;

    .liked-songs {
      background: #eaeffd;
      flex: 3;
      margin-top: 8px;
      cursor: pointer;
      border-radius: 16px;
      padding: 18px 24px;
      display: flex;
      flex-direction: column;
      transition: all 0.4s;
      box-sizing: border-box;
      color: #335eea;
      .top {
        // width: 192px;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        opacity: 0.88;
        color: #335eea;
        .p {
          margin-top: 2px;
        }
      }
      .button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--color-primary);
        .titles {
          .title {
            font-size: 24px;
            font-weight: 700;
          }
          .sub-title {
            font-size: 15px;
            margin-top: 2px;
          }
        }
        .play {
          transition: 0.2s;
          margin-bottom: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 44px;
          height: 44px;
          border-radius: 50%;
          font-size: 50px;
          color: #335eea;
        }
        .play:hover {
          transform: scale(1.1);
        }
      }
    }
    .songs {
      flex: 7;
      margin-top: 8px;
      margin-left: 36px;
      // overflow: hidden;
      // display: flex;
      // justify-content: space-between;
      // flex-wrap: wrap;
    }
  }
  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }
  /deep/ .el-tabs__active-bar {
    display: none;
  }
  .complete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 45px;
    h1 {
      font-weight: 600;
      color: #000;
    }
    .tanJa {
      padding-right: 8px;
    }
    .new {
      line-height: 38px;
      width: 104px;
      height: 38px;
    }
    .new:hover {
      cursor: pointer;
      background-color: #f5f5f7;
      border-radius: 10px;
    }
  }
}
</style>
